<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: HeAo
 * @LastEditTime: 2021-11-26 15:52:14
-->
<template>
    <div class="novel">
        <!--头部 -->
         <div class="header">
      <div class="containor">
        <!-- 点击行学天下时，跳转至首页，使用$router.go(-1) -->
        <div class="name" @click="$router.go(-1)">
          <img
            src="../assets/hhxy.png"
            alt="图片丢失"
            width="360px"
            height="80px"
          />
          </div>
        <div class="telephone">
          <img
            src="../assets/telephone.png"
            alt="图片丢失"
            width="25px"
            height="25px"
          />
           <router-link to="/contact us">联系我们</router-link>
        </div>
      </div>
    </div>
    
    <h1>特价书籍</h1>
        <div class="test">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center"><img src="http://images.china-pub.com/ebook8075001-8080000/8075859/zcover.jpg"  height="300" /> </td>
    <td align="center"><img src="	http://images.china-pub.com/ebook4965001-4970000/4966057/zcover.jpg" height="300" /></td>
    <td align="center"><img src="http://images.china-pub.com/ebook8080001-8085000/8082646/zcover.jpg
" height="300" /></td>
    <td align="center"><img src="http://images.china-pub.com/ebook8065001-8070000/8069661/zcover.jpg" height="300" /></td>
 
    
  </tr>
  <tr>
    <td align="center"><h1>机器学习</h1><br>定价：￥99.00<el-collapse v-model="activeNames" @change="handleChange">
 
<div>会员价：￥69.30 (70折)
<br>校园优惠价：￥69.30 (70折) (马上了解)
</div>
 
  </el-collapse>
  </td>
    <td align="center"><h1>Python语言实现</h1><br>定价：￥49.00<el-collapse v-model="activeNames" @change="handleChange">
<div>会员价：￥34.30 (70折)
<br>校园优惠价：￥34.30 (70折) (马上了解)
</div>
  </el-collapse>
  </td>
    <td align="center"><h1>技术、方法与案例</h1><br>定价：￥99.00<el-collapse v-model="activeNames" @change="handleChange">
  
<div>会员价：￥69.30 (70折)
<br>校园优惠价：￥69.30 (70折) (马上了解)
</div>
  
  </el-collapse>
  </td>
   <td align="center"><h1>智能驾驶技术</h1><br>定价：￥79.00<el-collapse v-model="activeNames" @change="handleChange">
  
<div>会员价：￥55.30 (70折)
<br>校园优惠价：￥55.30 (70折) (马上了解)
</div>
 
  </el-collapse>
  </td>
  </tr>
</table>
        </div>
      
        <el-divider></el-divider>
         <div class="test">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center"><img src="http://images.china-pub.com/ebook8080001-8085000/8080128/zcover.jpg"  height="300" /> </td>
    <td align="center"><img src="http://images.china-pub.com/ebook8065001-8070000/8069615/zcover.jpg" height="300" /></td>
    <td align="center"><img src="	http://images.china-pub.com/ebook8060001-8065000/8061301/zcover.jpg" height="300" /></td>
    <td align="center"><img src="	http://images.china-pub.com/ebook8080001-8085000/8083083/zcover.jpg" height="300" /></td>
 
    
  </tr>
  <tr>
    <td align="center"><h1>原理与实践</h1><br>定价：￥79.00<el-collapse v-model="activeNames" @change="handleChange">
 
<div>会员价：￥55.30 (70折)
<br>校园优惠价：￥55.30 (70折) (马上了解)
</div>
 
  </el-collapse>
  </td>
    <td align="center"><h1>智能风控</h1><br>定价：￥89.00<el-collapse v-model="activeNames" @change="handleChange">
  
<div>会员价：￥62.30 (70折)
<br>校园优惠价：￥62.30 (70折) (马上了解)
</div>

  </el-collapse>
  </td>
    <td align="center"><h1>原理与Python实现</h1><br>定价：￥89.00<el-collapse v-model="activeNames" @change="handleChange">
  
<div>会员价：￥62.30 (70折)
<br>校园优惠价：￥62.30 (70折) (马上了解)
</div>
  
  </el-collapse>
  </td>
   <td align="center"><h1>深度学习实战</h1><br>定价：￥149.00<el-collapse v-model="activeNames" @change="handleChange">
  
<div>会员价：￥104.30 (70折)
<br>校园优惠价：￥104.30 (70折) (马上了解)
</div>
 
  </el-collapse>
  </td>
  </tr>
</table>
</div>
</div>

</template>

<script>
import { get } from "@/utils/request.js";
export default {
  data() {
    return {
         categories: [],
    };
    },
    methods: {
    // 查询所有栏目信息
    findAllCategories() {
      // 使用axios封装的get方法，发送ajax请求，拿到所有的栏目数据
      get("/index/category/findAll").then((res) => {
        // 将后台接口响应的数据，设置到组件的数据模型中
        this.categories = res.data;
      });
    },
    },
    created() {
    // 调用查询所有栏目信息的方法
    this.findAllCategories();
    },
};
</script>
<style scoped>
.header {
  /* display: flex; */
  height: 80px;
  font-family: "微软雅黑";
  box-shadow: 0 0 5px 5px rgba(153, 153, 153, 0.329);
}
.containor {
  width: 90%;
  margin: 0 auto;
  height: 80px;
}
/* 为因为子元素浮动产生高度塌陷的父元素清除浮动 => 使用伪元素来清除浮动 */
.containor::after {
  display: block;
  clear: both;
  content: "";
}
.name {
  float: left;
  font-size: 22px;
  font-weight: bold;
  color: #555;
  height: 80px;
  line-height: 80px;
  cursor: pointer;
}
.category {
  float: left;
  display: flex;
  margin: 0;
  padding: 0 1em;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  color: #666;
}
.category > li {
  padding: 0 16px;
  cursor: pointer;
}
.telephone {
  float: right;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  font-weight: bold;
  color: #888;
  cursor: pointer;
}
.telephone > img {
  position: relative;
  top: 5px;
  margin-right: 10px;
}
.xs{
 cursor: pointer;   
}
.test{
  font-family: "微软雅黑";
  color: rgb(241, 12, 12);
}

a {
    text-decoration: none;
    color: rgb(107, 105, 105);
  }
</style>''  